<template>
  <div class="config-data">
    <apiMacroDefVue
      v-if="flag"
      v-model="configDataForm.apiMacroDef"
    ></apiMacroDefVue>
    <otherMacroDefVue
      v-if="flag"
      v-model="configDataForm.otherMacroDef"
      :dataTypeList="dataTypeList"
    ></otherMacroDefVue>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType, watch } from 'vue'
import apiMacroDefVue from './cmps/api-macro-def.vue'
import otherMacroDefVue from './cmps/other-macro-def.vue'
import { IConfigData, IDataType } from '@/render/store/drives/types'

export default defineComponent({
  components: {
    apiMacroDefVue,
    otherMacroDefVue
  },
  props: {
    modelValue: {
      type: Object,
      default: () => ({})
    },
    dataTypes: {
      type: Array as PropType<IDataType[]>,
      default: () => []
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const flag = ref(false)
    const formData = ref(props.modelValue)
    const dataTypeList = ref<IDataType[]>([])

    const configDataForm = ref({
      apiMacroDef: new Array<IConfigData>(),
      otherMacroDef: new Array<IConfigData>()
    })

    const handleConfigData = () => {
      configDataForm.value = {
        apiMacroDef: new Array<IConfigData>(),
        otherMacroDef: new Array<IConfigData>()
      }
      if (formData.value != null) {
        for (let index = 0; index < formData.value.length; index++) {
          const element = formData.value[index]
          if (element.type === 'api') {
            configDataForm.value.apiMacroDef.push({
              name: element.name
            })
          } else if (element.type === 'other') {
            configDataForm.value.otherMacroDef.push({
              name: element.name,
              dataType: element.dataType,
              value: element.value
            })
          }
        }
      }
      if (props.dataTypes != null) {
        dataTypeList.value.splice(0, dataTypeList.value.length)
        for (let index = 0; index < props.dataTypes.length; index++) {
          const element = props.dataTypes[index]
          dataTypeList.value.push({
            name: element.name,
            value: element.name
          })
        }
      }
    }

    const replyConfigData = (configDataForm: any): IConfigData[] => {
      const temps: IConfigData[] = []
      configDataForm.apiMacroDef.forEach((item: any) => {
        temps.push({
          name: item.name,
          type: 'api'
        })
      })
      configDataForm.otherMacroDef.forEach((item: any) => {
        temps.push({
          name: item.name,
          type: 'other',
          dataType: item.dataType,
          value: item.value
        })
      })
      return temps
    }

    watch(
      configDataForm,
      (n) => {
        emit('update:modelValue', replyConfigData(n))
      },
      {
        deep: true
      }
    )
    watch(
      props.modelValue,
      (n) => {
        handleConfigData()
      },
      {
        deep: true
      }
    )

    handleConfigData()
    flag.value = true
    return { dataTypeList, flag, configDataForm }
  }
})
</script>

<style scoped>
.config-data > div:nth-child(1) {
  margin-bottom: 10px;
}
</style>
